<template>
  <div class="card-box">
    <div class="card-box-left">
      <div class="current-level">
        <p>{{ $t('activity.checkin.current_level') }}</p>
        <p>{{ $t('activity.checkin.level_1') }} {{ activityData.level || 0 }}</p>
      </div>
      <div class="current-total">
        <p>{{ $t('activity.checkin.accumulated_bonus') }}</p>
        <p>{{ apo.utils.formateAmountWithSymbol(activityData.total_reward || 0) }}</p>
      </div>
    </div>
    <div class="card-box-right">
      <NuxtImg :src="currentLevelImage" />
      <div class="btn2 sl_box_shadow" v-click-move @click="handleClick">
        <div class="btn-content">
          <p v-if="isCountingDown">
            {{ pad2(countDown.current.hours) }}:{{ pad2(countDown.current.minutes) }}:{{ pad2(countDown.current.seconds)
            }}
          </p>
          <p v-else>{{ $t('activity.checkin.check_in') }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入倒计时工具
import { useCountDown } from '@vant/use'

const props = defineProps(['activityData', 'vipAssets'])
const emit = defineEmits(['handleCheckIn', 'initConfig'])
// 倒计时状态
const isCountingDown = computed(() => (props.activityData.count_down || 0) > 0)
// 倒计时实例配置
const countDown = ref<any>(useCountDown({
  time: 0,
  onFinish: () => {
    // 倒计时结束时重新获取活动配置
    emit('initConfig')
  },
}))

// 当前等级图片
const currentLevelImage = computed(() => props.vipAssets?.[(props.activityData.level || 1) - 1]?.image || '')

watch(
  isCountingDown,
  (val) => {
    if (val) {
      countDown.value.reset((props.activityData.count_down || 0) * 1000)
      countDown.value.start()
    } else {
      countDown.value.reset(0)
    }
  },
  { immediate: true },
)

function handleClick() {
  if (isCountingDown.value) {
    apo.toast.showFail($t('activity.checkin.toast'))
    return
  }
  emit('handleCheckIn')
}


</script>

<style scoped lang="scss">
.card-box {
  position: relative;
  display: flex;
  border-radius: 0.3rem;
  height: 3rem;
  background: url("/images/activity/checkin/vipSignIn-img-01.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  justify-content: space-between;
  padding: 0.4rem 0.3rem;
  box-sizing: border-box;
  color: var(--theme-neutral1);

  .card-box-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .current-level,
    .current-total {
      display: flex;
      align-items: center;
      font-size: 0.38rem;

      p {
        font-size: var(--font-size5);
        font-weight: 100;
        color: #E695E6;

        &:nth-of-type(2) {
          margin-left: 0.3rem;
          font-size: 0.44rem;
          font-weight: 700;
          color: #fff;
        }
      }
    }

    .current-total {
      display: block;

      p {
        margin-left: 0 !important;
        color: #95D8E6;
        font-size: 0.34rem;
      }
    }

    .current-total p:nth-of-type(2) {
      color: var(--theme-dec4);
      margin-top: 0.2rem;
    }
  }

  .card-box-right {
    display: flex;
    align-items: center;
    flex-direction: column;
    color: var(--theme-neutral1);
    margin-top: -0.2rem;

    img {
      width: 1.5rem;
    }

    .btn2 {
      width: 2.5rem;
      height: 0.8rem;
      text-align: center;
      font-size: 0.38rem;
      background: #FD66B1;
      border-radius: 0.26rem;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
      display: flex;
      justify-content: center;
      align-items: center;

      .btn-content {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
